<template>
  <div class="draggable" style="padding: 20px;" >
    <div class="Grid" style="padding: 20px;border: 2px dashed #100;" @contextmenu="showGridMenu">
       <div class="Row" @contextmenu="showRowMenu" v-for="(row,index) in rowList" :key="index" >
        <div class="Grid-cell" v-for="(item,d) in row" :key="d">
		  <PublicLabel :item="item"/>
		  <PublicItem :item="item" @change="getChange" /> 	  
        </div>
		<vue-context-menu :contextMenuData="rowMenuData"
        @beforeaddrow="beforeaddrow"
        @afteraddrow="afteraddrow"
		@deleterow="deleterow"
		></vue-context-menu>
      </div> 
<vue-context-menu :contextMenuData="gridMenuData"
        @addrow="addrow"></vue-context-menu>	  
    </div>
	
  </div>
</template>
<script>
import Sortable from "sortablejs";
import PublicItem from "../PublicItem/index";
import PublicLabel from "../PublicLabel/index";
export default {
  mounted() {
    this.divDrop();
  },
  components: {
    PublicItem,
	PublicLabel
  },
  data() {
    return {
	  rowList:[],
      rowList1: [[{type:"input",model:"name",label:"姓名",options:{width:"80px;",placeholder:"请输入内容"}},
	  {type:"input",model:"test",label:"测试",options:{width:"80px;",placeholder:"请输入测试内容"}}
	  ],[{type:"input-number" ,model:"age",label:"年龄",options:{width:"80px;",placeholder:"输入描述文字","min":1,"max":10}}],
	  [{type:"select",model:"hobby",label:"爱好",options:{width:"80px;",placeholder:"请选择",
	  items: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
	  }},{type:"switch",model:"sex",label:"性别",options:{width:"80px;",activeColor:"#13ce66", inactiveColor:"#ff4949"}}]
	  ],
      rowSortable: "",
      value: "",
	  uuidA:"",
	  form:{},
	   // 菜单数据
       rowMenuData: {
         menuName: 'rowManager',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'beforeaddrow', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '前面插入行' //菜单名称
         }, {
             fnHandler: 'afteraddrow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '后面插入行'
         },{
             fnHandler: 'deleterow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '删除行'
         }
		 ]
       },
	   gridMenuData: {
         menuName: 'gridManager',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'addrow', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '增加行' //菜单名称
         }
		 ]
       },
    };
  },
  methods: {
    // div拖拽
    divDrop() {
      const wrapperTr = document.querySelectorAll(".Grid .Row");
      var i;
      for (i = 0; i < wrapperTr.length; i++) {
        this.sortable = Sortable.create(wrapperTr[i], {
          draggable: ".Grid-cell",
          delay: 0,
          group: { name: "" + i, pull: true, put: true },
          onEnd: evt => {
            //if(evt.from.firstChild.outerHTML){
            //console.log('from:'+evt.from.firstChild.outerHTML);
            //}
            //if(evt.to.firstChild.outerHTML){
            //console.log('to:'+evt.to.firstChild.outerHTML);
            //}
            console.log(evt);
            console.log(evt.srcElement);
            //获取拖动后的排序
            //var arr = sortable.toArray();
            //console.log(JSON.stringify(arr));
          }
        });
      }
    },
	//获取内容变更
	getChange(value, key){
		console.log("value:"+value+",key:"+key);
		this.form[key]=value;
		console.log("form:"+JSON.stringify(this.form));
	},
	showGridMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.gridMenuData.axis = {
        x, y
      }
    },
	showRowMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.rowMenuData.axis = {
        x, y
      }
    },
    beforeaddrow () {
      alert("beforeaddrow")
    },
    deleterow () {
      console.log('delete!')
    },
	afteraddrow () {
      alert("afteraddrow")
    },
	addrow () {
      alert("addrow")
    },
	//uuid
	uuid() {
                var s = [];
                var hexDigits = '0123456789abcdef';
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = '4';
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = '-';

                this.uuidA = s.join('');
                console.log(s.join(''), 's.join("")');
                return this.uuidA;
    },

  }
};
</script>
<style scoped>
.Grid {
  width: 100%;
}
.Row {
  display: flex;
  border: 1px dashed #000;
  height: 50px;
}
.Grid-cell {
  display: flex;
  /* flex: 1; */
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>